<template>
 <div class="tecShare mt-lg-3">
      <div class="container-fluid">
        <div class="row">
           <div class="card col-12 col-lg-9 " v-for="(item,index) in list" :key="index">
                    <div class="card-body">
                        <h4 class="card-title" @click="toDetail(item)">{{item.atitle}}</h4>
                        <p class="card-text">{{item.acontent}}.</p>

                        <span href="#" class="card-link">作者：<span>{{item.auid}}</span> </span>
                        <a href="#" class="card-link">点赞({{$util.changeNum(item.prizeCount)}})</a>
                        <a href="#" class="card-link">评论({{item.commentCount>10000?(((item.commentCount-item.commentCount%1000)/10000+'W')):(item.commentCount)}})</a>
                        <a href="#" class="card-link">点击({{item.readNum>10000?(((item.readNum-item.readNum%1000)/10000+'W')):(item.readNum)}})</a>
                         <span class="card-link d-lg-inline d-none">发布时间:{{item.atime}}</span>
                         
                        <div class="float-right d-lg-block d-none">
                            <span class="tag pl-2 pr-2 pt-1 pb-1 float-right mr-1 " >插件</span>
                            <span class="tag pl-2 pr-2 pt-1 pb-1 float-right mr-1">游戏</span>
                            <span class="tag pl-2 pr-2 pt-1 pb-1 float-right mr-1">脚本</span>
                        </div>
                        
                    </div>
             </div>
        </div>
      </div>
 </div>
</template>

<script>
 export default {
   data () {
     return {
        list:[

        ]
     }
   },
   created(){
     this.$axios.get(this.$url+"getTecArticle").then(res=>{
      console.log(res.data.data)
      let tmp = res.data.data;
      tmp.forEach(element => {
        element.atime = this.$moment(element.atime).format(('YYYY-MM-DD hh:mm:ss'));
      });
       this.list = tmp;
     })
   },
   methods:{
     toDetail(item){
       this.$router.push('/homePage/readArticle?id='+item.articleId);
       localStorage.setItem("tecArticle",JSON.stringify(item));
     }
   },
   components: {

   }
 }
</script>

<style scoped lang='less'>
.card-text,.card-title{
    overflow: hidden;
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis;
    white-space:nowrap;
}
.tag{
    border: 1px solid rgb(221, 214, 214);
    border-radius: 15px;
    background: yellowgreen;
    font-size: 12px;
}
.card-title{
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}
.card-title:hover{
  color:blue;
}
.card-link{
  font-size: 0.8rem;
  cursor: pointer;
}
</style>
